關於 React 小書:將 JSX 傳入函式,再把回傳的 JSX 放到頁面


Posted by YongChenSu on 2020-12-09

將 JSX 傳入函式,再把回傳的 JSX 放到頁面

兩個 JSX 元素傳入 renderGoodWord 中,通過表達式,把該函數返回的 JSX 元素插入到頁面上。

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import './index.css'

class Header extends Component {
  renderGoodWord (goodWord, badWord) {
    const isGoodWord = true
    return isGoodWord ? goodWord : badWord
  }

  render () {
    return (
      <div>
        <h1>
          React 小書
          {this.renderGoodWord(
            <strong> is good</strong>,
            <span> is not good</span>
          )}
        </h1>
      </div>
    )
  }
}

ReactDOM.render(
  <Header />,
  document.getElementById('root')
)


參考資源


#程式導師實驗計畫第四期 #前端 #React #react 小書 #JSX







Related Posts

元件介紹-Day03 #元件樣板及綁定方法

元件介紹-Day03 #元件樣板及綁定方法

AWS Solutions Architect - Associate (SAA) 學習計畫與備考心得: Module 1

AWS Solutions Architect - Associate (SAA) 學習計畫與備考心得: Module 1

Git 版本控制指令 與 vim 編輯器

Git 版本控制指令 與 vim 編輯器


Comments